<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Epilog Theme">
    <title>Bizlamp - Multipurpose eCommerce HTML Template</title>

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">

    <!-- CSS Files -->
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/boxicons.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/mailform.css">
    <link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
    <link rel="stylesheet" href="assets/css/responsive.css?v=1.0.1">


    <style>
        /* 商品网格布局 */
        .product-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 商品之间的间距 */
        }

        /* 商品卡片样式 */
        .bl-product-item {
            flex: 1 1 calc(20% - 10px); /* 每行显示 5 个商品，减去间距 */
            box-sizing: border-box;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
        }

        /* 商品图片样式 */
        .bl-product-item-image img {
            width: 100%; /* 图片宽度占满容器 */
            height: 150px; /* 设置固定高度 */
            object-fit: cover; /* 保持图片比例，裁剪多余部分 */
            border-radius: 8px; /* 可选：添加圆角 */
        }

        /* 分页导航样式 */
        .pagination {
            text-align: center;
            margin-top: 20px;
        }

        .pagination button {
            padding: 5px 10px;
            margin: 0 5px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .pagination button:hover {
            background-color: #0056b3;
        }

        .pagination span {
            margin: 0 10px;
        }
    </style>

</head>
<body>
    <!-- Header Area Start -->
    <header class="header-area">
        <div class="main-navbar">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="index.html">
                        <img src="assets/images/logo.png" alt="logo">
                    </a>
                    <ul class="cart-menu responsive">
                        <li>
                            <a id="dropdownCartButton" class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span> <i class="bx bx-cart-alt"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                    <p>2 item(s) in your cart - <span>$665.00</span></p>
                                    <div class="minicart-products">
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Artisan Craft Design Product Handicraft</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>
                                        <div class="minicart-product-info d-flex">
                                            <figure>
                                                <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                            </figure>
                                            <div class="product-meta">
                                                <h5 class="product-title">
                                                    <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                </h5>
                                                <span class="product-price">1 x $280.00</span>
                                            </div>
                                            <a class="delete-btn" href="#" title="Delete Product">
                                                <span class="item-delete"><i class="bx bx-trash"></i></span>
                                            </a>
                                        </div>

                                        <div class="minicart-product-calculation">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                    <p><strong>Tax:</strong> <span>Free</span></p>
                                                    <p><strong>Total: </strong> <span>$665.00</span></p>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="dcart-action">
                                                        <a href="cart.html" class="btn btn-primary">View Cart</a>
                                                        <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <a id="dropdownUserButton" data-toggle="dropdown" href="#"><i class="bx bx-user-circle"></i> </a>
                            <div class="dropdown">
                                <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                    <a class="dropdown-item" href="#"><i class="bx bx-user-circle"></i> My Account</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-heart"></i> My Wishlist</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-cart-alt"></i> Checkout</a>
                                    <a class="dropdown-item" href="#"><i class="bx bx-log-in"></i> Login Or Register</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <form class="searchbox">
                                <input type="search" placeholder="Search......" name="search" class="searchbox-input" required="">
                                <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                            </form>
                            <a class="search-btn"><i class="bx bx-search-alt"></i></a>
                        </li>
                        <li>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                                <i class='bx bx-menu'></i>
                                <i class='bx bx-x'></i>
                            </button>
                        </li>
                    </ul>

                    <div class="collapse navbar-collapse mean-menu" id="navbarCollapse">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item dropdown">
                                <a class="nav-link active" href="shopping/index">
                                    Home
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Shop <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="shop.html" class="nav-link">Shop Grid</a></li>
                                    <li class="nav-item"><a href="product-details.html" class="nav-link">Products Details</a></li>
                                    <li class="nav-item"><a href="cart.html" class="nav-link">Cart</a></li>
                                    <li class="nav-item"><a href="checkout.html" class="nav-link">Checkout</a></li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown megamenu">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Collection <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item">
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Men</h6>
                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Women</h6>
                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Baby</h6>
                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>

                                                <div class="col-md-3 col-sm-6 col-xs-6 ">
                                                    <h6 class="submenu-title">Accessories</h6>

                                                    <ul class="megamenu-submenu">
                                                        <li><a href="#">Consectetur adipiscing elit</a></li>
                                                        <li><a href="#">Pellentesque facilisis</a></li>
                                                        <li><a href="#">Vivamus at sapien</a></li>
                                                        <li><a href="#">Elementum urna</a></li>
                                                        <li><a href="#">Sed et mauris</a></li>
                                                        <li><a href="#">Sed sit amet purus</a></li>
                                                        <li><a href="#">Tristique ac faucibus</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Pages <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
                                    <li class="nav-item"><a href="shopping/signin" class="nav-link">Login</a></li>
                                    <li class="nav-item"><a href="signup.html" class="nav-link">Register</a></li>
                                    <li class="nav-item"><a href="error-404.html" class="nav-link">404 Error</a></li>

                                    <li class="nav-item"><a href="faqs.html" class="nav-link">FAQ's</a></li>
                                    <li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a></li>
                                </ul>

                            </li>

                            <li class="nav-item dropdown">
                                <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">
                                    Blog <i class="bx bx-chevron-down"></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li class="nav-item"><a href="blog.html" class="nav-link">Blog</a></li>
                                    <li class="nav-item"><a href="blog-grid.html" class="nav-link">Blog Grid</a></li>
                                    <li class="nav-item"><a href="blog-details.html" class="nav-link">Blog Details</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a href="contact.html" class="nav-link">Contact</a>
                            </li>
                        </ul>
                        <ul class="cart-menu">
                            <li>
                                <a class="position-relative" data-toggle="dropdown" href="#"><span class="item-count">10</span><i class='bx bx-cart-alt' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu cart-dropdown" aria-labelledby="dropdownCartButton">
                                        <p>2 item(s) in your cart - <span>$665.00</span></p>
                                        <div class="minicart-products">
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_01.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Artisan Craft Design Product Handicraft</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>
                                            <div class="minicart-product-info d-flex">
                                                <figure>
                                                    <a href="#"> <img class="img-border" src="assets/images/products/product_02.png" alt="Home Decoration"></a>
                                                </figure>
                                                <div class="product-meta">
                                                    <h5 class="product-title">
                                                        <a href="#">Duis sodales ligula et orci pretium tempus</a>
                                                    </h5>
                                                    <span class="product-price">1 x $280.00</span>
                                                </div>
                                                <a class="delete-btn" href="#" title="Delete Product">
                                                    <span class="item-delete"><i class="bx bx-trash"></i></span>
                                                </a>
                                            </div>


                                            <div class="minicart-product-calculation">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <p><strong>Shipping:</strong> <span>$7.00</span></p>
                                                        <p><strong>Tax:</strong> <span>Free</span></p>
                                                        <p><strong>Total: </strong> <span>$665.00</span></p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="dcart-action">
                                                            <a href="cart.html" class="btn btn-primary">View Cart</a>
                                                            <a href="checkout.html" class="btn btn-secondary">Checkout</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a data-toggle="dropdown" href="#"><i class='bx bx-user-circle' ></i></a>
                                <div class="dropdown">
                                    <div class="dropdown-menu user-dropdown" aria-labelledby="dropdownUserButton">

                                        <a class="dropdown-item" href="#"><i class='bx bx-user-circle' ></i> My Account</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-heart' ></i> My Wishlist</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-cart-alt' ></i> Checkout</a>
                                        <a class="dropdown-item" href="#"><i class='bx bx-log-in' ></i> Login Or Register</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <form class="searchbox">
                                    <input type="search" placeholder="Search......" name="search" class="searchbox-input" required>
                                    <button class="searchbox-submit" type="submit"><i class="bx bx-search-alt"></i></button>
                                </form>
                                <a class="search-btn"><i class='bx bx-search-alt' ></i></a>
                            </li>
                        </ul>
                    </div>
                </nav>

            </div>
        </div>
    </header>
    <!-- Header Area End -->

    <!-- Breadcrumbs Area Start -->
    <div class="breadcrumbs text-center">
        <div class="container">
            <h2 class="page-title">Shop Page</h2>
            <ul class="breadcrumbs-link">
                <li><a href="index.html">Home <i class="bx bx-chevrons-right"></i></a></li>
                <li>Shop Page</li>
            </ul>
        </div>
    </div>
    <!-- Breadcrumbs Area Start -->



    <!-- 商品展示区域 -->
    <div class="bl-products-wrapper">
        <div class="container">
            <div class="section-title"><h3>商品</h3></div>
            <div class="product-grid" id="popular-products">
                <!-- 商品数据将动态插入 -->
            </div>

            <!-- 分页导航 -->
            <div class="pagination" id="pagination">
                <button id="prev-page">上一页</button>
                <span id="page-info"></span>
                <button id="next-page">下一页</button>
            </div>
        </div>
    </div>

    <div class="bl-products-wrapper">
        <div class="row" id="product-list">
            <!-- 商品卡片将动态插入到这里 -->
        </div>
    </div>



    <!--  Top to Bottom  -->
    <div class="top-bottom-scroll"><i class='bx bx-chevrons-up bx-fade-up' ></i></div>

    <!-- JS Script -->
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/aos.js"></script>
    <script src="./assets/js/mailform.js"></script>
    <script src="./assets/js/owl.carousel.min.js"></script>
    <script src="./assets/js/main.js?v=1.0.0"></script>
    <script src="layui/layui.all.js"></script>

    <script type="text/html" id="productitem">
        <div className="col-lg-3  col-md-4 col-sm-6">
            <div className="bl-product-item">
                <div className="bl-product-item-image">
                    <a href="shopping/product"><img src="assets/images/products/product_01.png" alt="Product 1"/></a>
                    <div className="add-to-cart">
                        <a href="#" className="btn-add-to-cart"><i className='bx bx-cart-alt'></i></a>
                    </div>
                </div>
                <div className="bl-product-item-description d-flex">
                    <div className="bl-product-item-price">$18.00</div>
                    <div className="bl-product-item-name"><a href="shopping/product?id=1">Pink Dress</a></div>
                </div>
                <div className="bl-product-item-hover-description text-center">
                    <div className="bl-product-item-price">$18.00</div>
                    <div className="bl-product-item-name"><a href="shopping/product?id=1">Pink Dress</a></div>
                    <div className="star-rating d-flex justify-content-center">
                        <i className="bx bxs-star"></i>
                        <i className="bx bxs-star"></i>
                        <i className="bx bxs-star"></i>
                        <i className="bx bxs-star"></i>
                        <i className="bx bxs-star"></i>
                    </div>
                </div>
            </div>
        </div>

        <div id="pagebox">

        </div>

    </script>

    <script>
        // 分页控制逻辑
        let currentPage = 1;
        const perPage = 10; // 每页固定显示10个商品
        let totalPages = 1;

        // 初始化加载
        $(document).ready(function() {
            loadProducts(currentPage);
            bindPaginationEvents();
        });

        // 核心数据加载函数
        function loadProducts(page) {
            $.ajax({
                url: '/product/list',
                method: 'GET',
                data: {
                    "page": page,       // 传递当前页码
                    "limit": perPage,   // 固定每页10条
                    text: ''
                },
                success: function(response) {
                    if (response.code === 0) {
                        renderProducts(response.data);
                        updatePagination(response.count, page);
                    }
                },
                error: function(xhr) {
                    console.error('Error:', xhr.statusText);
                }
            });
        }

        // 渲染商品列表（保持不变）
        function renderProducts(products) {
            const container = $('#popular-products');
            container.empty();

            products.forEach(product => {
                container.append(`
        <div class="bl-product-item">
            <div class="bl-product-item-image">
                <a href="shopping/product?id=${product.productid}">
                    <img src="${product.imgurl}" alt="${product.name}">
                </a>
            </div>
            <div class="bl-product-item-description d-flex">
                <div class="bl-product-item-price">￥${product.price}</div>
                <div class="bl-product-item-name">${product.name}</div>
            </div>
            <button class="add-to-cart-btn"
                    data-product-id="${product.productid}"
                    data-product-name="${product.name}"
                    data-product-price="${product.price}">
                <i class='bx bx-cart-alt'></i> 加入购物车
            </button>
        </div>
        `);
            });

            // 绑定购物车点击事件
            $('.add-to-cart-btn').off('click').on('click', function() {
                addToCart($(this).data());
            });
        }

        // 新增：添加到购物车函数
        function addToCart(product) {
            $.ajax({
                url: '/cart/add',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    productId: product.productId,
                    quantity: 1,
                    name: product.productName,
                    price: product.productPrice
                }),
                success: function(response) {
                    if (response.code === 0) {
                        // 更新购物车数量
                        const $cartCount = $('.item-count');
                        const currentCount = parseInt($cartCount.text()) || 0;
                        $cartCount.text(currentCount + 1);

                        layui.layer.msg('已加入购物车', {icon: 1});
                    } else {
                        layui.layer.msg(response.msg || '添加失败', {icon: 2});
                    }
                },
                error: function(xhr) {
                    layui.layer.msg('网络错误，请重试', {icon: 2});
                    console.error('Error:', xhr.statusText);
                }
            });
        }


        // 更新分页状态（保持不变）
        function updatePagination(totalItems, currentPage) {
            totalPages = Math.ceil(totalItems / perPage);
            $('#page-info').html(`第 ${currentPage} 页 / 共 ${totalPages} 页`);

            // 按钮状态控制
            $('#prev-page').prop('disabled', currentPage <= 1);
            $('#next-page').prop('disabled', currentPage >= totalPages);
        }

        // 分页事件绑定（保持不变）
        function bindPaginationEvents() {
            $('#prev-page').click(() => {
                if(currentPage > 1) {
                    loadProducts(--currentPage);
                }
            });

            $('#next-page').click(() => {
                if(currentPage < totalPages) {
                    loadProducts(++currentPage);
                }
            });
        }
    </script>


</body>
</html>